<script setup>
import { ref, reactive, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from "vue"
import getRules from "@/validUtils";
// dialog弹框组件

const formDialog = ref(null)

const handleClose = () => {
    cancel()
}
const form = ref({
    merchantCode:'', //商户编码 
    channelNo:'' //渠道号
})

const props = defineProps({
    dialogVisible:{
        type:Boolean,
        default:false
    },
    backForm:{
        type:Object,
        default:() => ({})
    },
    dialogTitle:{
        type:String,
        default:''
    }
})

// 定义方法
const emit = defineEmits(['changeDialog','submitPay'])
const backFile = (val) => {
    console.log(val,'val');
}

const cancel = () => {
    emit('changeDialog',false)
}

const SubmitEvent = () => {
    formDialog.value.validate((valid) => {
        if (valid) {
            let data = {
            ...props.backForm,
            ...form.value
        }
        emit('submitPay',data)
        }
    })
}
    

//组件挂载到节点上之前执行的函数
onBeforeMount(()=>{})

//组件挂载完成后执行的函数
onMounted(()=>{})

//组件更新之前执行的函数
onBeforeUpdate(()=>{})

//组件更新完成之后执行的函数
onUpdated(()=>{})

//组件卸载之前执行的函数
onBeforeUnmount(()=>{})

//组件卸载完成后执行的函数
onUnmounted(()=>{})

</script>

<template>
  <div class="">
    <el-dialog
            v-model="props.dialogVisible"
            :title="dialogTitle"
            width="500px"
            :before-close="handleClose"
            align-center
            :close-on-click-modal=false
        >
           <div class="dialog-main">
              <div class="title-show">
                <div class="door-info">门店：{{backForm.storeName || '-'}}</div>
                <div class="buss-pic">营业执照名称：{{backForm.licenseName || '-'}}</div>
              </div>
              <el-form :model="form" label-width="110px" ref="formDialog">
   
   
                <el-form-item label="数族商户编号" prop="merchantCode" :rules="getRules('input','数族商户编号')">
                   <el-input v-model="form.merchantCode" />
                </el-form-item>

                <el-form-item label="渠道号"> 
                    <el-input v-model="form.channelNo" />
                </el-form-item>
                <div class="title-tips">如需使用商城，需填入数族提供的渠道号</div>
            </el-form>
            </div>
                <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="SubmitEvent">
                    确定
                    </el-button>
                </span>
                </template>
            </el-dialog>
  </div>
</template>

<style lang="less" scoped>
    .dialog-main{
        .title-show {
            margin:6px 0 16px 0;
            padding: 12px;
            width: 468px;
            height: 66px; 
            background: rgba(52, 128, 255, 8%);
            // opacity: 8%;
            box-sizing: border-box;
            
            .buss-pic{
              
            }
            .door-info{
                margin-bottom: 12px;
                color: #3480ff;
                font-family: "PingFang SC";
                font-size: 16px;
                font-style: normal;
                font-weight: 600;
                line-height: 16px;
            }
        }
        .el-form-item{
            margin-bottom: 16px;
            :deep(.el-input) {
                width: 354px;
            }
          
         }
         .title-tips{
                margin-top: -7px;
                // width: 100%;
                padding-left: 112px;
                color: #666666;
                font-family: "PingFang SC";
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 12px; 
            }
    }
   
</style>
